<template>
  <div>obj数据： {{ obj.userInfo.name }}</div>
</template>

<script setup>
import { reactive, watch } from 'vue';

const obj = reactive({ userInfo: { name: '小鲁班' } });

// watch(obj, (newObj, oldObj) => {
//   console.log(newObj, oldObj);
// });
watch(
  () => obj.userInfo,
  (newObj, oldObj) => {
    console.log(newObj, oldObj);
  },
  {
    // deep就是告诉watch  子对象里面的属性变化也去监听变化，触发回调函数
    deep: true,
  }
);

setTimeout(() => {
  obj.userInfo.name = '安琪拉';
  // obj.userInfo = { name: '92期' };
}, 3000);
</script>
